<template>
	<view>
		<u-card title="下期可能出现的红球号码">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<text v-for="(v1,k1) in getBall(next.red)" class="red-ball">{{v1}}</text>
					</view>
				</view>
			</view>
		</u-card>
		<u-card title="下期可能出现的蓝球号码">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<text v-for="(v1,k1) in getBall(next.blue)" class="blue-ball">{{v1}}</text>
					</view>
				</view>
			</view>
		</u-card>
		<u-card title="往期预测及中奖结果">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<u-button type="success" size="mini" @click="prediction">
							点击跳转到往期预测结果对比页面
						</u-button>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				next: {
					red: [1, 2, 3, 4, 5, 6],
					blue: [1, 2, 3, 4]
				}
			};
		},
		onLoad() {
			uni.request({
				url: 'http://127.0.0.1:8000/ssq/api/v1/next', //仅为示例，并非真实接口地址。
				data: {},
				header: {},
				success: (res) => {
					console.log(res.data)
					this.next = res.data
				}
			});
		},
		methods: {
			prediction() {
				uni.navigateTo({
					url: '/pages/ssq/prediction/prediction'
				});
			},
			//处理红球
			getBall(ball) {
				let result = []
				for (var i = 0; i < ball.length; i++) {
					let temp = ball[i]
					if (temp > 9) {
						result.push('' + temp)
					} else {
						result.push('0' + temp)
					}
				}
				return result
			}
		}
	};
</script>

<style scoped lang="scss">
	.blue-ball,
	.red-ball {
		display: inline-block;
		margin: 5rpx;
		padding: 6rpx;
		font-size: 36rpx;
		border-radius: 50%;
		color: white;
	}

	.blue-ball {
		background-color: blue;
	}

	.red-ball {
		background-color: red;
	}
</style>
